<div class="breadCrumb clearfix">    
    <ul id="breadcrumbs">
        <li><a href="index-2.html">Home</a></li>
        <li><a href="#">UI</a></li>
        <li>Widgets</li>
    </ul>        
</div>

<div class="content">
    
    <div class="row-fluid">         
        
        <div class="middle">

            <div class="informer">
                <a href="#">
                    <span class="icomg-cog"></span>
                    <span class="text">Settings</span>
                </a>
                <span class="caption">!</span>
            </div>

            <div class="informer">
                <a href="#">
                    <span class="icomg-stats-up"></span>
                    <span class="text">Statistic</span>
                </a>
                <span class="caption purple">+343</span>
            </div>

            <div class="informer">
                <a href="#">
                    <span class="icomg-comments3"></span>
                    <span class="text">Comments</span>                        
                </a>
                <span class="caption green">+15</span>
            </div>                
            
            <div class="informer">
                <a href="#">
                    <span class="title">98%</span>
                    <span class="text">Free Disk space</span>                        
                </a>
                <span class="caption orange">+14%</span>
            </div>                

            <div class="informer">
                <a href="#">
                    <span class="title">$2,534</span>
                    <span class="text">Balance</span>
                </a>
                <span class="caption red">-$135</span>
            </div>               
        
        </div>

    </div>
    
    <div class="row-fluid">
        
        <div class="span6">
            
            <div class="widget">
                <div class="head dark">
                    <div class="icon"><i class="icos-star3"></i></div>
                    <h2>Tickets</h2>
                    <ul class="buttons">                                                        
                        <li><a href="#"><span class="icos-cog"></span></a></li>
                    </ul>                          
                </div>
                
                <div class="block-fluid">

                    <ul class="list tickets">
                        <li class="new clearfix" id="T212">
                            <div class="title">
                                <a href="#">Product info</a>
                                <p>Promble with order of pictures...</p>
                            </div>
                            <div class="actions">
                                <a href="#" class="tip" title="Edit"><span class="icon-pencil"></span></a> 
                                <a href="#" class="remove tip" title="Remove"><span class="icon-remove"></span></a>
                            </div>
                        </li>
                        <li class="accept clearfix" id="T213">
                            <div class="title">
                                <a href="#">Request backup</a>
                                <p>Plese send me backup from 24/11/2012...</p>
                            </div>
                            <div class="actions">
                                <a href="#" class="tip" title="Edit"><span class="icon-pencil"></span></a> 
                                <a href="#" class="remove tip" title="Remove"><span class="icon-remove"></span></a>
                            </div>
                        </li>
                        <li class="accept clearfix" id="T214">
                            <div class="title">
                                <a href="#">Sign in button</a>
                                <p>Doesnt send post requset to server...</p>
                            </div>
                            <div class="actions">
                                <a href="#" class="tip" title="Edit"><span class="icon-pencil"></span></a> 
                                <a href="#" class="remove tip" title="Remove"><span class="icon-remove"></span></a>
                            </div>
                        </li>
                        <li class="done clearfix" id="T215">
                            <div class="title">
                                <a href="#">Send email using HTML</a>
                                <p>Some characters are deleted from the template...</p>
                            </div>
                            <div class="actions">
                                <a href="#" class="tip" title="Edit"><span class="icon-pencil"></span></a> 
                                <a href="#" class="remove tip" title="Remove"><span class="icon-remove"></span></a>
                            </div>
                        </li>                        
                        <li class="done clearfix" id="T216">
                            <div class="title">
                                <a href="#">Print form</a>
                                <p>When you click on "print form" it displays an error...</p>
                            </div>
                            <div class="actions">
                                <a href="#" class="tip" title="Edit"><span class="icon-pencil"></span></a> 
                                <a href="#" class="remove tip" title="Remove"><span class="icon-remove"></span></a>
                            </div>
                        </li>                                                    
                    </ul>                        
                    
                </div>                    
            </div>

            <div class="widget">
                <div class="profile clearfix">
                    <div class="image">
                        <img src="/images/examples/users/dmitry_b.jpg" class="img-polaroid"/>
                    </div>                        
                    <div class="info">
                        <h2>Dmitry Ivaniuk</h2>
                        <p><strong>Profile:</strong> Aqvatarius</p>
                        <p><strong>Address:</strong> 44 Revutskogo, Kiev, Ukraine</p>
                        <p><strong>Profession:</strong> Web Developer</p>
                        <div class="status">Administrator</div>
                    </div>
                    <div class="stats">
                        <div class="item">
                            <div class="title">129</div>
                            <div class="descr">Files</div>                                
                        </div>                            
                        <div class="item">
                            <div class="title">38</div>
                            <div class="descr">Stories</div>                                
                        </div>                                                        
                        <div class="item">
                            <div class="title">45</div>
                            <div class="descr">Followers</div>
                        </div>
                        <div class="item">
                            <div class="title">14</div>
                            <div class="descr">Following</div>                                
                        </div>                            
                    </div>
                </div>
            </div>                
            
            <div class="widget">
                
                <div class="head dark">
                    <div class="icon"><i class="icos-comments"></i></div>
                    <h2>Comments</h2>
                    <ul class="buttons">                                                        
                        <li><a href="#"><span class="icos-refresh"></span></a></li>
                    </ul>                          
                </div>
                
                <div class="block messages">
                    
                    <div class="item" id="comment_1">
                        <div class="image">
                            <img src="/images/examples/users/dmitry.jpg" class="img-polaroid"/>
                        </div>
                        <div class="date">14:55</div>
                        <div class="text">
                            <a href="#">Dmitry</a>
                            <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
                        </div>
                        <div class="rating" id="rate_comment_id_1">
                            <a href="#" class="star active tip" title="1"></a>
                            <a href="#" class="star tip" title="2"></a>
                            <a href="#" class="star tip" title="3"></a>
                            <a href="#" class="star tip" title="4"></a>
                            <a href="#" class="star tip" title="5"></a>
                        </div>
                        <div class="actions">                                
                            <a href="#"><span class="icon-share-alt"></span></a>
                            <a href="#"><span class="icon-pencil"></span></a>
                            <a href="#"><span class="icon-remove"></span></a>
                        </div>
                    </div>
                    
                    <div class="item" id="comment_4">
                        <div class="image">
                            <img src="/images/examples/users/helen.jpg" class="img-polaroid"/>
                        </div>
                        <div class="date">13:55</div>
                        <div class="text">
                            <a href="#">Helen</a>
                            <p>Nulla vel metus scelerisque ante sollicitudin commodo. Cras sit amet nibh libero, in gravida nulla. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
                        </div>
                        <div class="rating" id="rate_comment_id_4">
                            <a href="#" class="star active tip" title="1"></a>
                            <a href="#" class="star active tip" title="2"></a>
                            <a href="#" class="star active tip" title="3"></a>
                            <a href="#" class="star tip" title="4"></a>
                            <a href="#" class="star tip" title="5"></a>
                        </div>                            
                        <div class="actions">                                
                            <a href="#"><span class="icon-share-alt"></span></a>
                            <a href="#"><span class="icon-pencil"></span></a>
                            <a href="#"><span class="icon-remove"></span></a>                                
                        </div>                            
                    </div>                         

                    <div class="item" id="comment_5">
                        <div class="image">
                            <img src="/images/examples/users/alexey.jpg" class="img-polaroid"/>
                        </div>
                        <div class="date">13:50</div>
                        <div class="text">
                            <a href="#">Alex</a>
                            <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
                        </div>
                        <div class="rating" id="rate_comment_id_5">
                            <a href="#" class="star active tip" title="1"></a>
                            <a href="#" class="star active tip" title="2"></a>
                            <a href="#" class="star active tip" title="3"></a>
                            <a href="#" class="star active tip" title="4"></a>
                            <a href="#" class="star active tip" title="5"></a>
                        </div>                            
                        <div class="actions">                                
                            <a href="#"><span class="icon-share-alt"></span></a>
                            <a href="#"><span class="icon-pencil"></span></a>
                            <a href="#"><span class="icon-remove"></span></a>                                
                        </div>                            
                    </div>                         
                    
                </div>
                
            </div>
            

            <div class="widget">
                
                <div class="head dark">
                    <div class="icon"><i class="icos-comments2"></i></div>
                    <h2>Messaging</h2>      
                    <ul class="buttons">                                                        
                        <li><a href="#"><span class="icos-plus1"></span></a></li>
                    </ul>                                                  
                </div>
                <div class="toolbar">
                    <div class="user">
                        <img src="/images/examples/users/dmitry_m.jpg" class="img-polaroid"/> <a href="#">Dmitry</a>
                    </div>
                    <div class="user">
                        <img src="/images/examples/users/alexey_m.jpg" class="img-polaroid"/> <a href="#">Alex</a>
                    </div>                            
                </div>
                <div class="block messaging">                        
                    
                    <div class="item">
                        <div class="image">                                
                            <img src="/images/examples/users/dmitry.jpg" class="img-polaroid"/>
                        </div>           
                        <div class="date">20:43</div>
                        <div class="text">
                            <a href="#">Dmitry</a>
                            <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
                        </div>                            
                    </div>                         

                    <div class="item out">
                        <div class="image">
                            <img src="/images/examples/users/alexey.jpg" class="img-polaroid"/>
                        </div>                            
                        <div class="date">20:30</div>
                        <div class="text">
                            <a href="#">Alex</a>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                        </div>                            
                    </div>
                    
                    <div class="item">
                        <div class="image">
                            <img src="/images/examples/users/dmitry.jpg" class="img-polaroid"/>
                        </div>                            
                        <div class="date">20:10</div>
                        <div class="text">
                            <a href="#">Dmitry</a>
                            <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
                        </div>                            
                    </div>                        
                    
                </div>
                <div class="toolbar bottom">
                    <div class="input-append input-prepend">
                        <button class="btn tip" title="Add photo" type="button"><span class="icon-picture"></span></button>
                        <button class="btn tip" title="Add video" type="button"><span class="icon-film"></span></button>
                        <input type="text"/>
                        <button class="btn btn-primary" type="button">Send</button>
                    </div>
                </div>
            </div>                
            
            
        </div>
        
        <div class="span6">

            <div class="widget">
                <div class="wrapper">
                    <div class="input-append input-prepend">
                        <span class="add-on"><span class="icon-search"></span></span>                            
                        <input type="text"/>
                        <button class="btn btn-primary" type="button">Search</button>
                        <button class="btn btn-primary" type="button">Advanced</button>
                    </div>             
                </div>
            </div>
            
            <div class="widget">
                <div class="head dark">
                    <div class="icon"><i class="icos-user3"></i></div>
                    <h2>Events</h2>
                    <ul class="buttons">                                                        
                        <li><a href="#"><span class="icos-calendar"></span></a></li>
                    </ul>                                                  
                </div>                    
                <div class="block-fluid events">
                    
                    <div class="item">
                        <div class="date">
                            <div class="caption"><span class="icon-star icon-white"></span></div>
                            <span class="day">14</span>
                            <span class="month">Dec</span>
                        </div>
                        <div class="info">
                            <a href="#">Upcoming event</a>
                            <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
                            <div class="TAR">
                                <button class="btn btn-mini">More</button>
                            </div>                                
                        </div>
                    </div>

                    <div class="item">
                        <div class="date">
                            <div class="caption green"><span class="icon-tags icon-white"></span></div>
                            <span class="day">16</span>
                            <span class="month">Dec</span>
                        </div>
                        <div class="info">
                            <a href="#">One more event</a>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
                            <div class="TAR">
                                <button class="btn btn-mini">More</button>
                            </div>                                
                        </div>
                    </div>                        
                    
                    <div class="item">
                        <div class="date">
                            <div class="caption red"><span class="icon-info-sign icon-white"></span></div>
                            <span class="day">25</span>
                            <span class="month">Dec</span>
                        </div>
                        <div class="info">
                            <a href="#">Important event</a>
                            <p>Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.</p>
                            <div class="TAR">
                                <button class="btn btn-mini">More</button>
                            </div>
                        </div>
                    </div>                         
                    
                </div>
            </div>
            
            <div class="widget">
                
                <div class="row-fluid">
                    <div class="span6">
                        <div class="userCard">
                            <div class="image">
                                <img src="/images/examples/users/alexey.jpg" class="img-polaroid"/>
                            </div>
                            <div class="info">
                                <h3>Alexey</h3>
                                <p><span class="icon-heart"></span> 2,195 <span class="icon-camera"></span> 121</p>
                                <button class="btn btn-primary">Follow</button>
                                <div class="informer">
                                    6,422
                                    <span>Followers</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="span6">
                        <div class="userCard">
                            <div class="image">
                                <img src="/images/examples/users/dmitry.jpg" class="img-polaroid"/>
                            </div>
                            <div class="info">
                                <h3>Dmitry</h3>
                                <p><span class="icon-heart"></span> 4,326 <span class="icon-camera"></span> 222</p>
                                <button class="btn btn-danger">Unfollow</button>
                                <div class="informer">
                                    12,327
                                    <span>Followers</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>                    
                
            </div>
            
            <div class="widget">
                <div class="head">
                    <div class="icon"><i class="icosg-html5"></i></div>
                    <h2>Code preview</h2>
                </div>
                <div class="block-fluid">
                    <pre class="brush: js">
                        
                        $("#SomeId").someFuntion(function(){
                            $(this).someaction('Yeah!');
                          });
                        document.getElementById("SomeIDName").addEventListener('click',function(){
                            alert('Yeah');
                        },false);
                    </pre>
                </div>
            </div>                
            
            <div class="widget">
                <div class="head dark">
                    <div class="icon"><i class="icos-bookmark"></i></div>
                    <h2>Contacts</h2>
                    <ul class="buttons">                                                        
                        <li><a href="#"><span class="icos-share"></span></a></li>
                    </ul>                                                  
                </div> 
                <div class="toolbar">
                    <div class="input-append">
                        <input type="text" placeholder="Keyword..."/>
                        <button class="btn btn-primary" type="button"><span class="icon-search icon-white"></span></button>
                    </div>                          
                </div>
                <div class="block-fluid">
                    
                    <table cellpadding="0" cellspacing="0" width="100%" class="sTable">
                        <tbody>
                            <tr>
                                <td width="100" align="center">
                                    <img src="/images/examples/users/dmitry.jpg" class="img-polaroid"/>                                                                    
                                    <address>
                                        <strong>Dmitry Ivaniuk</strong><br>
                                        <a href="mailto:#">dmitry@domain.com</a>
                                    </address>
                                </td>
                                <td width="70%">
                                    <address>
                                        <strong>Loremipsum, Inc.</strong><br>
                                        44 Dolorist, Suite 444<br>
                                        Core, CA 15212<br>
                                        <abbr title="Phone">P:</abbr> +98 (765) 432-1098
                                    </address>
                                </td>
                                <td width="30%">
                                    <span class="label label-success">Friends</span>
                                    <span class="label label-warning">Work</span>
                                </td>
                                <td width="30">
                                    <button class="btn btn-primary tipl" title="Send message"><span class="icon-envelope icon-white"></span></button>
                                    <button class="btn btn-primary tipl" title="Edit"><span class="icon-pencil icon-white"></span></button>
                                    <button class="btn btn-primary tipl" title="Remove"><span class="icon-remove icon-white"></span></button>
                                </td>
                            </tr>
                            <tr>
                                <td align="center">
                                    <img src="/images/examples/users/olga.jpg" class="img-polaroid"/>                                                                    
                                    <address>
                                        <strong>Olga Ivaniuk</strong><br>
                                        <a href="mailto:#">olga@domain.com</a>
                                    </address>
                                </td>
                                <td>
                                    <address>
                                        <strong>Loremipsum, Inc.</strong><br>
                                        44 Dolorist, Suite 444<br>
                                        Core, CA 15212<br>
                                        <abbr title="Phone">P:</abbr> +98 (765) 432-1097
                                    </address>
                                </td>
                                <td>
                                    <span class="label label-success">Friends</span>
                                    <span class="label label-info">Family</span>
                                </td>                                
                                <td>
                                    <button class="btn btn-primary tipl" title="Send message"><span class="icon-envelope icon-white"></span></button>
                                    <button class="btn btn-primary tipl" title="Edit"><span class="icon-pencil icon-white"></span></button>
                                    <button class="btn btn-primary tipl" title="Remove"><span class="icon-remove icon-white"></span></button>
                                </td>
                            </tr>                            
                            <tr>
                                <td align="center">
                                    <img src="/images/examples/users/helen.jpg" class="img-polaroid"/>                                                                    
                                    <address>
                                        <strong>Helen Symonchuk</strong><br>
                                        <a href="mailto:#">helen@domain.com</a>
                                    </address>
                                </td>
                                <td>
                                    <address>
                                        <strong>Loremipsum, Inc.</strong><br>
                                        45 Dolorist, Suite 555<br>
                                        Core, CA 15212<br>
                                        <abbr title="Phone">P:</abbr> +98 (765) 122-1587
                                    </address>
                                </td>
                                <td>
                                    <span class="label label-success">Friends</span>
                                    <span class="label label-important">Classmates</span>
                                </td>                                
                                <td>
                                    <button class="btn btn-primary tipl" title="Send message"><span class="icon-envelope icon-white"></span></button>
                                    <button class="btn btn-primary tipl" title="Edit"><span class="icon-pencil icon-white"></span></button>
                                    <button class="btn btn-primary tipl" title="Remove"><span class="icon-remove icon-white"></span></button>
                                </td>
                            </tr>  
                        </tbody>
                    </table>                       
                    
                </div>
                <div class="toolbar bottom">
                    <div class="pagination pagination-centered pagination-mini">
                        <ul>
                            <li class="disabled"><a href="#">&laquo;</a></li>
                            <li class="active"><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li class="disabled"><span>...</span></li>                    
                            <li><a href="#">56</a></li>
                            <li><a href="#">57</a></li>
                            <li><a href="#">58</a></li>
                            <li><a href="#">59</a></li>                    
                            <li><a href="#">&raquo;</a></li>
                        </ul>
                    </div>                             
                </div>                    
            </div>                
            
            
        </div>
            
    </div>

    <div class="row-fluid">
        <div class="span12">
            <div class="widget">
                <div class="head">
                    <div class="icon"><i class="icosg-menu"></i></div>
                    <h2>Custom scroll</h2>
                </div>
                <div class="block typography">
                    <div class="scroll" style="height: 100px;">                        
                        <a href="/images/examples/photo/example_1.jpg" class="fb"><img src="/images/examples/photo/example_1s.jpg" class="img-polaroid" align="right"/></a> 
                        <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure.</p>
                        <a href="/images/examples/photo/example_7.jpg" class="fb"><img src="/images/examples/photo/example_7s.jpg" class="img-polaroid" align="left"/></a> 
                        <p>Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
                        Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure.</p>
                    </div>
                </div>
            </div>
        </div>            
    </div>
    
    <div class="row-fluid">
        
        <div class="span4">
            
            <div class="widget">
                <div class="head">
                    <div class="icon"><i class="icosg-star3"></i></div>
                    <h2>Example</h2> 
                    <div class="items">
                        <div class="rating" id="rate_box_head">
                            <a href="#" class="star active tip" title="1"></a>
                            <a href="#" class="star active tip" title="2"></a>
                            <a href="#" class="star active tip" title="3"></a>
                            <a href="#" class="star tip" title="4"></a>
                            <a href="#" class="star tip" title="5"></a>
                        </div>                              
                    </div>
                </div>
                <div class="block">
                    Sample rating in box head.
                </div>
            </div>                
            
        </div>
        
        <div class="span4">

            <div class="widget">
                <div class="head">
                    <div class="icon"><i class="icosg-star3"></i></div>
                    <h2>Example</h2>                        
                    <div class="items" style="width: 100px;">
                        <div class="progress small progress-warning">
                            <div class="bar tip" style="width: 70%;" data-original-title="70%"></div>
                        </div>
                    </div>
                </div>
                <div class="block">
                    Sample progress bar in box head.
                </div>
            </div>                
            
        </div>
        
        <div class="span4">

            <div class="widget">
                <div class="head">
                    <div class="icon"><i class="icosg-star3"></i></div>
                    <h2>Example</h2>                        
                    <div class="items">
                        <span class="label label-info">Example text</span>
                    </div>
                </div>
                <div class="block">
                    Sample label in box head.
                </div>
            </div>                  
            
        </div>
        
    </div>                        
    
    <div class="row-fluid">
        
        <div class="span4">
            
            <div class="widget">
                <div class="head dark">
                    <div class="icon"><i class="icos-star3"></i></div>
                    <h2>Example dark</h2> 
                    <div class="items">
                        <div class="rating" id="rate_box_head2">
                            <a href="#" class="star active tip" title="1"></a>
                            <a href="#" class="star active tip" title="2"></a>
                            <a href="#" class="star active tip" title="3"></a>
                            <a href="#" class="star tip" title="4"></a>
                            <a href="#" class="star tip" title="5"></a>
                        </div>                              
                    </div>
                </div>
                <div class="block">
                    Sample rating in dark box head.
                </div>
            </div>                
            
        </div>
        
        <div class="span4">

            <div class="widget">
                <div class="head dark">
                    <div class="icon"><i class="icos-star3"></i></div>
                    <h2>Example dark</h2>                        
                    <div class="items" style="width: 100px;">
                        <div class="progress small progress-warning">
                            <div class="bar tip" style="width: 70%;" data-original-title="70%"></div>
                        </div>
                    </div>
                </div>
                <div class="block">
                    Sample progress bar in dark box head.
                </div>
            </div>                
            
        </div>
        
        <div class="span4">

            <div class="widget">
                <div class="head dark">
                    <div class="icon"><i class="icos-star3"></i></div>
                    <h2>Example dark</h2>                        
                    <div class="items">
                        <span class="label label-info">Example text</span>
                    </div>
                </div>
                <div class="block">
                    Sample label in dark box head.
                </div>
            </div>                  
            
        </div>
        
    </div>

    <div class="row-fluid">
        
        <div class="span4">
            
            <div class="widget">
                <div class="head simple">                        
                    <h2>Example Simple</h2> 
                    <div class="items">
                        <div class="rating" id="rate_box_head3">
                            <a href="#" class="star active tip" title="1"></a>
                            <a href="#" class="star active tip" title="2"></a>
                            <a href="#" class="star active tip" title="3"></a>
                            <a href="#" class="star tip" title="4"></a>
                            <a href="#" class="star tip" title="5"></a>
                        </div>                              
                    </div>
                </div>
                <div class="block">
                    Sample rating in box head.
                </div>
            </div>                
            
        </div>
        
        <div class="span4">

            <div class="widget">
                <div class="head simple">
                    <h2>Example Simple</h2>                        
                    <div class="items" style="width: 100px;">
                        <div class="progress small progress-warning">
                            <div class="bar tip" style="width: 70%;" data-original-title="70%"></div>
                        </div>
                    </div>
                </div>
                <div class="block">
                    Sample progress bar in box head.
                </div>
            </div>                
            
        </div>
        
        <div class="span4">

            <div class="widget">
                <div class="head simple">
                    <h2>Example</h2>                        
                    <div class="items">
                        <span class="label label-info">Example text</span>
                    </div>
                </div>
                <div class="block">
                    Sample label in box head.
                </div>
            </div>                  
            
        </div>
        
    </div>        
    
    <div class="row-fluid">
        
        <div class="span4">
            
            <div class="widget">
                <div class="head dark">
                    <div class="icon"><i class="icos-star3"></i></div>
                    <h2>Collapsible</h2> 
                    <ul class="buttons">                                                        
                        <li><a href="#" class="cblock"><span class="icos-menu"></span></a></li>
                    </ul>                         
                </div>
                <div class="block">
                    Sample collapsible block.
                </div>
            </div>                
            
        </div>
        
        <div class="span4">

            <div class="widget">
                <div class="head dark">
                    <div class="icon"><i class="icos-star3"></i></div>
                    <h2>Collapsible</h2>                        
                    <ul class="buttons">                                                        
                        <li><a href="#" class="cblock"><span class="icos-menu"></span></a></li>
                    </ul>  
                </div>
                <div class="block" style="display: none;">
                    Sample collapsible closed block.
                </div>
            </div>                
            
        </div>
        
        <div class="span4">

            <div class="widget">
                <div class="head dark">
                    <div class="icon"><i class="icos-star3"></i></div>
                    <h2>Collapsible</h2>                        
                    <ul class="buttons">                                                        
                        <li><a href="#" class="cblock"><span class="icos-menu"></span></a></li>
                    </ul>
                </div>
                <div class="block" data-collapse="eblock_1">
                    Collapsible block with cookies control.
                </div>
            </div>                  
            
        </div>
        
    </div>        
    
</div>